<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        边框的属性
            边框的颜色 border-color:颜色值
            边框的宽度 border-width: 数值
            边框的样式 border-style:solid 实线  dashed 虚线 none 没有线 idotted点线 double 双线

            简写
                border:solid 2px red; 不分先后顺序
    
            设置方向 
                border-top:边框的颜色 边框的宽度 边框的样式;  上边的边框
                border-left:边框的颜色 边框的宽度 边框的样式;  左边的边框
                border-bottom:边框的颜色 边框的宽度 边框的样式;  下边的边框
                border-right:边框的颜色 边框的宽度 边框的样式;  右边的边框
    
        注意：边框会把盒子撑大
            -->
     <style>
         .all{
             width:200px; height:200px;
             /* border-color:red;
             border-width:10px;
             border-style:double; */
             border-left:solid 20px yellow;
             /* 左边 */
             border:solid red 10px;
             /* 四个边 包含左边 */

           
         }
     

     </style>
</head>
<body>
   <div class="all"></div> 
</body>
</html>